<template>
  <el-card>
    <span slot="header">商品列表</span>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-image style="width: 40px; height: 40px"
                :src="props.row.imgUrl" fit="fill"></el-image>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime| formatYMDhms }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="goodsName">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属分类" prop="category">
        <template slot-scope="scope">
          <span>{{ scope.row.category }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" prop="goodsPrice">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品图片" prop="goodsImg">
        <template slot-scope="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl"
            fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" width="300px" prop="goodsDesc">
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" style="margin-right:10px;"
            @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button size="mini" type="danger" slot="reference">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="mt20" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import { getGoodsListReq, delGoodsReq, checkCateGoriesReq } from "@/api/goods";

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      total: 0,
      tableData: [],
      // ids: [],
      kindList: [],
    };
  },
  methods: {
    //获取商品列表
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      let res = await getGoodsListReq({
        currentPage,
        pageSize,
      });
      // console.log('res :>> ', res)
      let { total, data } = res.data;
      this.tableData = data;
      this.total = total;
      //  console.log(this.tableData);
      //解决删除问题
      if (data.length !== "" && currentPage !== 1) {
        currentPage--;
        this.getData();
      }
    },

    //查询分类列表
    async getCheckCateList() {
      let res = await checkCateGoriesReq();
      // console.log('res.data :>> ', res.data);
      this.kindList = res.data;
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    async handleDelete(row) {
      let { id } = row;
      // console.log(row)
      let res = await delGoodsReq({ id });
      console.log("res.data :>> ", res.data);
      let { code, msg } = res.data;
      if (code === 0) {
        this.getData();
      }
    },

    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
